import React, {FC} from "react";
import {Link, useNavigate} from "react-router-dom";
import {LOGIN_PATH} from "../router";
import {useDispatch} from "react-redux";
import {Avatar, Button, message} from "antd";
import {reomveToken} from "../utils/tokenUtils";
import useGetUserInfo from "../hooks/useGetUserInfo";

import styles from "./UserInfo.module.scss"
import {logoutRuder} from "../store/userReducer";

const UserInfo :FC =()=>{
    //对于已经登入的用户，显示什么？ 这里进行优化，减少网络的开销，直接从数据状态管理中获取
    const {username,naLable} = useGetUserInfo();
    // const {data} = useRequest(getUserInfoServe);
    // const{username,naLable} = data || {};

    const nav =useNavigate();
    const dispatch = useDispatch();

    function logout(){
        dispatch(logoutRuder());//清空数据，记得加（）执行
        reomveToken(); //清空token
        message.success("退出成功")
        nav(LOGIN_PATH);
    }

    // const UserInfo = (
    //     <>
    //     <span style={{color:"black"}}>
    //           <UserOutlined/>
    //         {naLable}
    //     </span>
    //       <Button type={"link"} onClick={logout}>
    //           退出
    //       </Button>
    //     </>
    // )
    //
    // const Login = <Link to={LOGIN_PATH} style={{ color: 'orange' }} >登录</Link>;
    //
    // return(
    //     <div style={{backgroundColor:"oldlace",width:"180px",textAlign:"center"}} >
    //             {username?UserInfo:Login}
    //     </div>
    // )

    const UserInfo = (
        <>
    <span style={{ color: "black" }}>
       <Avatar size="large" style={{ backgroundColor: '#fde3cf', color: '#f56a00'}}>{naLable}</Avatar>
    </span>
            <Button  style={{
                color:"black"}}  type={"link"} onClick={logout}>
                退出
            </Button>
        </>
    );

    const Login = (
        <Link to={LOGIN_PATH} style={{color:"black"}}>
            登录
        </Link>
    );

    return (
          <div className={styles.content}>
              <div className={styles.inner}>
                  {username ? UserInfo : Login}
              </div>
          </div>
    );



}

export default UserInfo;